<template>
  <div class="field">
    <template v-if="type == 'text'">
      <label>{{label}}</label>
      <input type="text" v-model="val" :placeholder="placeholder" @input="onInput" ref="input">
    </template>
    <template v-else-if="type == 'radio'">
      <label>{{label}}</label>
      <van-radio-group class="radio-inline" v-model="radio" @change="sexChange">
        <van-radio name="0">先生</van-radio>
        <van-radio name="1">女士</van-radio>
      </van-radio-group>
    </template>
    <template v-else-if="type == 'del'">
      <img :src="Del" class="small-icon" alt>
      <label class="red">{{label}}</label>
    </template>
    <template v-else-if="type == 'return'">
      <img src alt>
      <label class="red">{{label}}</label>
    </template>
    <template v-else>
      <label>{{label}}</label>
      <slot></slot>
    </template>
  </div>
</template>

<script>
import Del from '../../assets/common/delete.png'
export default {
  props: ["label", "placeholder", "type", "value"],
  data() {
    return {
      Del,
      val: this.value,
      radio: this.value
    };
  },
  watch: {
    value(newVal, objVal) {
      this.val = newVal;
      this.radio = newVal;
    }
  },
  methods: {
    onInput() {
      this.$emit("change", this.val);
    },
    sexChange(v) {
      this.$emit("sexChange", this.radio);
    }
  }
};
</script>

<style lang="less" scoped>
input:disabled {
  background: #fff;
}
.field {
  padding: 4vw 0;
  border-bottom: 1px solid #f9f9f9;
  display: flex;
  align-items: center;
  label {
    display: inline-block;
    width: 20vw;
    font-size: 4vw;
    color: #333;
  }
  label.red {
    color: #ff0000;
  }
  input {
    border: 0;
    outline: none;
    font-size: 4vw;
    width: 70vw;
  }

  input::-webkit-input-placeholder {
    color: #999;
  }
}
.radio-inline {
  display: flex;
  & > div {
    margin-right: 6vw;
  }
}
.small-icon {
  width: 6vw;
  height: 6vw;
  margin-right: 2vw;
}
</style>